



TYPOGRAPHY 








ypography is the science of using letter forms for 

communication. We use letter forms extensively in 
our daily life, in various media like newspapers, signages, 
application forms, letters, notebooks, textbooks, currency 
notes, posters, tickets, SMS, email etc. 

A very large number of digital fonts are available for a 
graphic designer to use in design projects. A designer carefully 
chooses fonts after understanding the design problem, the 
medium, target audience, production aspects and the context. 
Fonts have unique characteristics and need to be carefully 
chosen and used to achieve good results in communication. 
For example, newspaper designers spend a considerable 
time in experimenting with different fonts in different sizes 
to create a final design which helps a reader to go through 
several pages of a newspaper with ease and understand the 
text comfortably. 


CLASSIFICATION 


In English, fonts are classified into several groups. 
There are three main groups. 


1. Serif 
2. Sans-Serif 


3. Script 


Serif: A serif is the pointed ending of a stroke as in “I” or “T”. 
This is inspired by the letters carved on stone, using chisels. 
Thickness of the strokes also changes in these letter forms, 
like those drawn by flat brushes. Serif fonts are known for 
their readability and is widely used in text composition for 
books, newspapers, magazines etc, where a large amount of 
text is to be composed in small point sizes. 


Sans Serif: Sans means without. Sans serif means without 
Serif. Sans serif fonts have blunt endings to the strokes. 
Almost all the strokes look like equal thickness, as if drawn 
by a marker pen. Sans serif fonts give a modern look and 
is widely used in logos and symbols, packaging, signages, 
websites, mobile phone interfaces, gaming consoles etc. 


Script: Script fonts recreate the visual styling of calligraphy. 
The letters imitate the feeling of calligraphic nibs, with a 
slant to the right and changing thickness of strokes. These 
fonts give a festive and personal look to the reader and are 
very commonly used in wedding invitations. 


India India Yudéa 


Serif font: Times Roman Sans serif font: Helvetica Script font: Brushscript 


Font classification: Examples 
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India 


Serif 


India 


Sans Serif 


India 


Script 


| 


Serifs 








Find examples of vari- 

ous fonts and alignments 
from printed sources like 
newspapers, magazines, 
brochures, newsletters etc. 
and analyse them. Also try 
to find out the font that this 
book has been set in. 


ANATOMY OF A FONT 


As human body has many parts for identification like head, 
neck, shoulder, arms, tail, foot etc., Type Forms or Font face 
are also divided into parts, which we study under ‘anatomy 
of fonts’. Some examples you will see below: 





e Shirorekha connotes headline 
e Skandharekha, is equivalent to shoulderline 
e Padarekha means baseline 


KANA SINGLE MATRA RAFAR (REPH) ANUSVAR DIRGHA VELANTI 






















MATRA LINE Oo es a = ee =e = a 
UPPER 5 a ae a a eine 
MEAN LINE ATT” Ta ` mm ee 
LOWER INA OA Sr- UEY H Aee Aie 
MEAN LINE OU C NS 3 AS BASE LINE 
RUKAR LINE 
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IKAR BINDU CHANDRA HRŞVA VELANTI 
y oN + a, a, rN 
==. GEA GE | SEE aaa el 
De elie dll ieee MUCI LF ital © 
Wag UU UW CIR 
CONJUCT 


In future you will come across words like tail, arm and 
swish etc. 


The size or formation of these anotamical parts of a font 
actually help create the typical charactertics and expressive 
qualities of any font family. 


A B C Uppercase and Lowercase 
Capital letters are called “Uppercase” letters in typographical 


Uppercase terminology. During handcomposing, metal type of all capital 
letters were stored in the upper section of wooden boxes, kept 
ab C in front of the person composing the text. Similarly, all small 
letters are called “Lowercase” letters, which were stored in 

Lowercase the lower part of the composing box. 


Ascender Ascender 


Ascender is the portion of the alphabet that ‘ascends’ or 
exceeds above the ‘x’ height of an alphabet as in b, d, t, 1. 








Descender 











Descender is that portion of an alphabet that goes below or 
extends downwards from the ‘x’ height of an alphabet as in 


& j, q; P- 





Descender 


Ascender 


Ascender line 


<——— Mean line 
x-height 


<—_—— Base line 
Counter space 





<«—— Descender line 
—— 
X-height 
Height of lowercase “x” is called “x-height”. This varies 
considerably in typefaces. X-height contributes to the 
readability of fonts. 
7 . 
_ Comparison of 
x-height 


Times Roman Helvetica Brushscript 





Counter Space 


The empty space or negative space inside a letter form is 
called a counter. Shape of the counter varies according to 
the designer who creates the font. Counter space also helps 
in identifying different fonts. These shapes can be creatively 
used in creating logos. 


PDE rero 
Phe om 


Comparison of counter 
e Century Schoolbook spaces in different fonts: 


Shape and proportion 
changes in various fonts 
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Point size is the space 
measured from the 
bottom of the descender 
to the top of the ascender. 


Point Size —————> 


For additional information 
refer to your Class XI book 
chapter on Movable Metal 

Type to Digital Imagery 


Baseline 























Baseline 


FEATURES OF A FONT 


When we look at a page out of a newspaper or book, some 
features help us identify the publication. These are a group 
of elements of typography, which we call features of a font. 
They help increase the readability or legibility of a font. 
These could be the size of the letters, the space between 
alphabet or the spaces between words or lines and the 
thickness of the strokes along with the corresponding 
space. These are features that contribute to the optimum 
visibility of the printed words. 


Point Sizes 


Size of fonts are generally specified in point size. In typography, 
the smallest unit of measure is a point, specified as “pt”. At 
the time of letterpress, space for printing were specified in 
“picas” or “ems”, which were subdivided into points. 








? 





linch = 72 points 

l point = 0.353 mm 
1 point = 0.0139 inch 
lpica = 12 points 
linch = 6 picas 
Leading 


“Leading” is the space between lines of text. In digital 
typography, leading is the space between successive baselines. 
For text composition, leading is also specified in points. 
For example, if you need a space of two points between lines 
of text, you have to add that to the point size of the text and 
specify leading. So if you need 2pt leading for text with 10pt 
size, then leading = 10 + 2 = 12pt. 
This will be specified as “lOpt on 12pt”. 

When composing text, it is very important to use the 
correct point size and leading. This helps the reader to read 
the text comfortably. When you use fonts with large x-height 
or use long lines of text (more than 10 words in a line), extra 
leading is useful. 


The text you are reading is set in Bookman font in 11pt 


with 13pt leading. 





Text: 9pt on 9pt. 


Leading is the space 
between lines of text. 
In digital typography, 
leading is the space 
between successive 
baselines. 

For text composi- 

tion, leading is also 
specified in points. For 
example, if you need a 
space of two points be- 
tween lines of text, you 
have to add that to the 
point size of the text 
and specify leading. 


Text: 9pt on 10pt. 


Leading is the space 
between lines of text. 
In digital typography, 
leading is the space 
between successive 
baselines. 

For text composi- 

tion, leading is also 
specified in points. For 
example, if you need a 
space of two points be- 
tween lines of text, you 
have to add that to the 
point size of the text 
and specify leading. 


Text: 9pt on 12pt. 


Leading is the space 
between lines of text. 
In digital typography, 
leading is the space 
between successive 
baselines. 

For text composi- 

tion, leading is also 
specified in points. For 
example, if you need a 
space of two points be- 
tween lines of text, you 
have to add that to the 
point size of the text 
and specify leading. 


Text: 9pt on 14pt. 


Leading Is the space 
between lines of text. 
In digital typography, 
leading is the space 
between successive 
baselines. 

For text composi- 

tion, leading is also 
specified in points. For 
example, if you need a 
space of two points be- 
tween lines of text, you 
have to add that to the 
point size of the text 
and specify leading. 
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Weight 


The amount of boldness in a stroke is called weight. Many fonts 
are available in different “weights”, like Thin or Light, Regular, 
Bold, Extra Bold (or Extra Black) etc. 

By changing the weight of the font, one can empasise or 
express the meaning of the word. 


Aa 


Univers 
Black 


Aa 


Univers 
Extra Black 


Aa 


Univers 
Thin 


Aa 


Univers 
Regular 


Aa 


Univers 


Bold 
Different weights of the 


same font family 





Expressions Through Change of Weight 


WEAK 


STRONG 


LIGHT 
HEAVY 





THIN 
THICK 











while you were 


The 
Image RUNNER 2200/2800/3300 


(This is a dummy text) It provides all the or soget te a for y ick 
intui! rations of all device functions- ng your 
valuable time to do other tasks. 


(This is a dummy text) It provides all the necessary tools for quick 
and intuitive operations l all device functions-saving your 
valuable time to do ol 

is is a dummy t aa viene all the necessary tools f ee 
and intuitive operations o all device functions-saving your 
valuable time to do other t 


Bridging the Paper and Digital 
Worlds 


eh isa anes ext) It provides all the n yee ae eos! = a 
anı ing 


intuitive operations of all device functio! 
aus ava Gon oher tasks. (This i EUGA A 


‘ovides all the neces: s for quici 
operations of all device functions-saving or 


sen Erosion an ta a oe i The Image RUNNER 2200/2800/3300 
and intuitive operations of all device provides all the necessary tools for quick and intuitive 


‘It tpr 
all the necessary tools for quick and intuitive operation: 
device functions-saving your v: = tasks.(This 
is a dummy text) It provides all the necessary tools for 
intuitive operations of all device funcdi jons-saving your valuable 
time to do other tasks 
(This i sado ummy text) t proitise al ne necessary iooi lora pek 
and intuitive operations of all device functions-saving yi 
valuable ti me to do other tasks. (This is a du uy = It 

ick and 
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functio luable time to d 
other tasks.to do oher tasks, 7 0 C9 operations of all device functions-saving your valuable 
time to do other tasks. 


staplec folded tt toc 
ged- TOO 
just to make sure that 


work should go on even 
during breaks 

















Different width of 
the same font family 





Width 


The amount of space taken by letter forms can change as 
per the design. In some occasions where more text has to be 
fitted in a limited amount of space, variations of fonts were 
designed to accomodate more characters per line. This was 
done by redesigning the original fonts in such a way as to 
occupy less width and by keeping the same height. This is 
called a “condensed” font. 

On the other side, when you have less text and more 
space, you can use the opposite of condensed, the elongated 
or “expanded” or “extended” font. 

Many fonts are available in different “widths”, like 
condensed or compressed, extended or expanded etc. 

By changing the width of the font, one can empasise or 
express the meaning of the word. 


al Aa Aa 


Univers Univers Univers 
Ultra Condensed Condensed Extended 





Style 


Different typographical styles like Italics and outlines can be 
used creatively to provide expressions to text. 








WIDE NARROW LSLMULe LN? 
Slanting INCOMPLET: 
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TEXT FORMATTING 


When you look at different kinds of publications or printed 
matter some provide us with a pleasure to read and some 
look difficult and disturbing. The legibility depends on how 
the text matter is presented. 

Once a suitable font has been selected it has to be 
typeset, arranged or formatted in a desirable manner, so 
that it looks comfortable to read. Various things contribute 
to make a document easily readable. We will now look at 


some of these. 


Text Alignment 

Text can be composed in different allignments. Usually, text 
is alligned in one of the following ways: 

l. Left aligned 2.Justified 3. Centralised 4. Right aligned 


Justified setting forces all composed lines to start and end in 
a specific area, which results in the final composition look like 
a box. Justified text is also called “box setting”. This setting 
is very popular in textbooks, newspapers and magazines 
and helps to fit more text in a given space. However, this can 
cause ugly white spaces between words and letters, called 
“River” and “Bubble”. 





Left aligned Justified Centralised Right aligned 


Leading isthe space Leading is the space Leading is the space Leading is the space 
between lines of between lines of text. between lines of text. between lines of text. 
text. In digital typog- In digital typogra- In digital typography, In digital typography, 
raphy, leading isthe phy, leading is the leading is the space leading is the space 
space between suc- space between suc- between successive between successive 
cessive baselines. cessive baselines. baselines. baselines. 
For text composi- For text composi- For text composi- For text composition, 
tion, leading is also tion, leading is also tion, leading is also leading is also speci- 
specified in points. specified in points. specified in points. For fied in points. For 
For example, if you For example, if you example, if you need a example, if you need 
need a space of two need a space of two space of two points be- a space of two points 
points between lines points between lines tween lines of text, you between lines of text, 
of text, you have to of text, you have have to add that to the you have to add that 
add that tothe point to add that to the point size of the text to the point size of 
size of the text and point size of the text and specify leading. the text and specify 
specify leading. and specify leading. leading. 


= 
2 
”) 
Oo 
O 
= 
& 
Q. 
© 
Sze 
g 
o 
Q) 
< 
> 
(o) 
Z 
© 
”) 
xe) 
2 
© 
= 





Bubble Bubble 


An unwanted ugly white space which appears between words 
is called a Bubble. 


River 


A series of white spaces or Bubbles make an ugly white line 
in a paragraph, called a river. This too causes discomfort in 
reading. 





in points. For example, if 
you need a space of two 
points between lines of 
text, you have to add that 
to the point size of the 
text and specify leading. 


an the ki 
ecause its 





OSS and | b 
re en 


d 


ex 
Li but it’ 
SUited ta 


Hyphenation 


The hyphen (-) is a punctuation mark used to join words and 
to separate syllables of a single word. Hyphens are mostly 
used to break single words into parts, or to join ordinarily 


separate words into single words. 


Text composed without 
Hyphenation 


The hyphen (— ) is a 
punctuation mark used 
to join words and to 
separate syllables of a 


single word. Hyphens 
are mostly used to 
break single words 
into parts, or to join 
ordinarily separate 
words into single 
words. 


Widow 


Text composed with 
Hyphenation 


The hyphen ( — ) is 

a punctuation mark 
used to join words 
and to separate sylla- 
bles of a single word. 
Hyphens are mostly 
used to break single 
words into parts, or to 
join ordinarily sepa- 
rate words into single 
words. 





A small word or the last syllable of a hyphenated word, at the 
end of a paragraph is called a widow. This is considered to be 
typographically distracting to the reader. 


Orphan 


A short isolated line at the top of a column or a page is called 
Orphan. It is usually the last line of a paragraph from the 
preceding column. Orphan confuses the reader because they 
are separated from the main paragraph. Due to the position, 


an orphan often causes typographical distraction. 
Text composition which leaves the first line of a paragraph 
at the bottom of a column also causes distraction to the reader. 


Widow: 


A small word or 

the last syllable 

of a hyphenated 
word, at the end 

of a paragraph is 
called a widow. This 
is considered to be 
typographically 


distracting to the 


SS 


Widow 





—2—— Orphan 


Orplian.: 


A short isolated line at 
the top of a column ora 
page is called Orphan. 
It is usually the last line 


of a paragraph from the 
preceding column. Orphan 
confuses the reader 


because they are separated 
from the main paragraph. 
Due to the position, an 
orphan often causes 
typographical distraction. 
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Make a poster on a social 
issue in A3 size. You may 

use graphics to support the 
text but it should primarily 
be a typographical design. 
Try to achieve typographic 
expressions by experimenting 
with orientation, size, 
position, space, weight, width 
and style of the chosen font. 
Choose appropriate colours 
to support the theme of the 
poster. 


India has 22 official 
languages. Scripts of 
these can been seen on 
our currency notes. 





Fonts from different 
languages: Compare the 
x-height and counter 
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Toilets 
aaa 
DI*OOODNGD 
No Smoking 
qo Fae 
RADIR NADAT 
een eee EE 
r 
Few examples of multi- © 
lingual signages 


MULTILINGUAL TYPOGRAPHY 


In India, 13 scripts are used for 22 official languages. In 
some contexts like Signage systems and logotypes, text is 
composed in more than one language. Designers choose 
fonts from different langauges carefuly, so that they result 
in a harmonious visual. Visual comparison should be done 
before finalising fonts from different languages to be used in 
a single visual. 

Comparison of stroke width, x-height and counter space 
is an important activity in multilingual typography. 


HHT Glog 


Devnagari Malayalam 


Sari Abc 


English 


SALES COUNTER 


STAT 
DIRECTOR BUNGLOW 


RESIDENTIAL AREA 





EXPRESSIVE TYPOGRAPHY 


A designer can use fonts creatively for expressing various 
emotions. One can select a font which can convey an emotion 
or you can play around with the way you use letters. 


2 Expressive 
‘Fe Camal use of fonts 


in relation to 


Bi 


Many expressions can be presented through letter forms. 
By experimenting with some of the parameters listed below, 
you can create typographic expressions. 


1. Orientation 2. Size 3. Position 4. Space 


1. Orientation 2. Size 3. Position 


D 
Deag. REDuc JUM 


4. Space 














ACTIVITY 3 | 


Choose any two words 

and in two different 
compositions arrange each 
word to express its meaning 
(one word per composition). 
Do not use any graphics or 
images. Your design should 
be on 6 x 6 inches in black 
and white. 


ACTIVITY 4 y 





Select a poem or a short 
story and illustrate words 
from it like love, freedom, 
justice, success, dream 

etc. The chosen graphics 
and fonts should help in 
communicating the meaning 
of the word. 


